/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 10, 2014, 11:48:53 AM
    Author     : HOME
*/

.box {
    width: 400px;
    height: 80px;
    border: 3px solid rgb(60, 60, 60);
    margin: 10px auto;
    font-size: 30px;
    text-shadow: 2px 2px white;
}
#linear {
    background-image: linear-gradient(top left, red, white, green);
    background-image: -webkit-linear-gradient(top left, red, white, green);
    background-image: -ms-linear-gradient(top left, red, white, green);
    background-image: -moz-linear-gradient(top left, red, white, green);
    background-image: -o-linear-gradient(top left, red, white, green);

    box-shadow:          0px 0px 10px rgba(0,0,80,0.7),          0px 0px 4px rgba(0,0,0,0.4), 3px 3px 6px rgba(0,0,0, 0.5),          2px 2px 1px rgba(255,255,255,0.3) inset,          10px 10px 20px rgba(0,0,0,0.1) inset;
}
#repeating_linear {
    background-image: repeating-linear-gradient(top left, red, white, red 30%);
    background-image: -webkit-repeating-linear-gradient(top left, red, white, red 30%);
    background-image: -moz-repeating-linear-gradient(top left, red, white, red 30%);
    background-image: -ms-repeating-linear-gradient(top left, red, white, red 30%);
    background-image: -o-repeating-linear-gradient(top left, red, white, red 30%);
}
#radial {
    background-image: radial-gradient(center center, ellipse cover, white, blue);
    background-image: -webkit-radial-gradient(center center, ellipse cover, white, blue);
    background-image: -moz-radial-gradient(center center, ellipse cover, white, blue);
    background-image: -ms-radial-gradient(center center, ellipse cover, white, blue);
    background-image: -o-radial-gradient(center center, ellipse cover, white, blue);
}
#repeating_radial {
    background-image: repeating-radial-gradient(center center, ellipse cover, white, blue, white 30px);
    background-image: -webkit-repeating-radial-gradient(center center, ellipse cover, white, blue, white 30px);
    background-image: -moz-repeating-radial-gradient(center center, ellipse cover, white, blue, white 30px);
    background-image: -ms-repeating-radial-gradient(center center, ellipse cover, white, blue, white 30px);
    background-image: -o-repeating-radial-gradient(center center, ellipse cover, white, blue, white 30px);
}
#collapsed_linear {
    background-image: linear-gradient(left, red, red 33%, white 33%, white 66%, green 66%);
    background-image: -webkit-linear-gradient(left, red, red 33%, white 33%, white 66%, green 66%);
    background-image: -moz-linear-gradient(left, red, red 33%, white 33%, white 66%, green 66%);
    background-image: -ms-linear-gradient(left, red, red 33%, white 33%, white 66%, green 66%);
    background-image: -o-linear-gradient(left, red, red 33%, white 33%, white 66%, green 66%);
}
#collapsed_radial {
    background-image: radial-gradient(center center, ellipse contain, white, white 55%, blue 55%);
    background-image: -webkit-radial-gradient(center center, ellipse contain, white, white 55%, blue 55%);
    background-image: -moz-radial-gradient(center center, ellipse contain, white, white 55%, blue 55%);
    background-image: -ms-radial-gradient(center center, ellipse contain, white, white 55%, blue 55%);
    background-image: -o-radial-gradient(center center, ellipse contain, white, white 55%, blue 55%);
}